<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<style>
  div {
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    font-weight: bolder;
    border: 2px solid #000;
    border-radius: 10px;
    position: absolute;
    transition: all 1s;
  }

  button {
    width: 100px;
    height: 50px;
    position: absolute;
    top: 300px;
    left: 45vw;
    border: 2px solid black;
    border-radius: 3px;
    transition: all 0.5s;
  }

  button:hover {
    background-color: #e9d1d1;
  }
</style>

<body>
  <div id="div1" style="left: 200px;"></div>
  <div id="div2" style="left: 400px;"></div>
  <div id="div3" style="left: 600px;"></div>
  <div id="div4" style="left: 800px;"></div>
  <div id="div5" style="left: 1000px;"></div>
  <button id="jh">排序</button>
  <script>
    alert("这是一个可以将数字排序的网页")
    let jhs = document.getElementById("jh");
    let div1s = document.getElementById("div1");
    let div2s = document.getElementById("div2");
    let div3s = document.getElementById("div3");
    let div4s = document.getElementById("div4");
    let div5s = document.getElementById("div5");
    div1s.innerHTML = prompt("请输入第一个数字");
    while (div1s.innerHTML != +div1s.innerHTML) { div1s.innerHTML = prompt("你的输入有误，再输一次吧") }
    div2s.innerHTML = prompt("请输入第二个数字");
    while (div2s.innerHTML != div2s.innerHTML) { div2s.innerHTML = prompt("你的输入有误，再输一次吧") }
    div3s.innerHTML = prompt("请输入第三个数字");
    while (div3s.innerHTML != +div3s.innerHTML) { div3s.innerHTML = prompt("你的输入有误，再输一次吧") }
    div4s.innerHTML = prompt("请输入第四个数字");
    while (div4s.innerHTML != +div4s.innerHTML) { div4s.innerHTML = prompt("你的输入有误，再输一次吧") }
    div5s.innerHTML = prompt("请输入第五个数字");
    while (div5s.innerHTML != +div5s.innerHTML) { div5s.innerHTML = prompt("你的输入有误，再输一次吧") }
    let data = [+div1s.innerHTML, +div2s.innerHTML, +div3s.innerHTML, +div4s.innerHTML, +div5s.innerHTML];
    console.log(data);
    let data1 = [];
    for (i = 0; i <= 4; i++) {
      data1[i] = data[i];
    }
    console.log(data1.sort());//排序
    console.log(data1);
    let div1mov, div2mov, div3mov, div4mov, div5mov;
    jhs.onmousedown = function () {
      for (i = 0; i <= 4; i++) {
        if (data[0] == data1[i]) { div1mov = (i + 1) * 200; break; }
      }
      for (i = 0; i <= 4; i++) {
        if (data[1] == data1[i]) { div2mov = (i + 1) * 200; break; }
      }
      for (i = 0; i <= 4; i++) {
        if (data[2] == data1[i]) { div3mov = (i + 1) * 200; break; }
      }
      for (i = 0; i <= 4; i++) {
        if (data[3] == data1[i]) { div4mov = (i + 1) * 200; break; }
      }
      for (i = 0; i <= 4; i++) {
        if (data[4] == data1[i]) { div5mov = (i + 1) * 200; break; }
      }
      div1s.style.left = +div1mov + "px";

      div2s.style.left = +div2mov + "px";

      div3s.style.left = +div3mov + "px";

      div4s.style.left = +div4mov + "px";
      
      div5s.style.left = +div5mov + "px";
    }
  </script>
</body>
</html>